<template>
  <el-form ref="ruleFormRef" :rules="rules" :model="formRole" label-width="100px">
    <el-row>
      <el-col :span="8">
        <el-form-item label="角色名" prop="name">
          <el-input v-model="formRole.name" placeholder="请输入角色名"/>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="角色排序" prop="sort">
          <el-input-number v-model="formRole.sort" :min="0" placeholder="请输入角色排序"/>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="超级管理员" prop="isAdmin">
          <el-switch v-model="formRole.isAdmin" :active-value="1"
                     :inactive-value="0"
                     style="--el-switch-on-color: #e99d53;"/>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="分配菜单">
          <el-tree
              ref="treeRef"
              :data="menus"
              :props="treeProps"
              mutiple
              :render-after-expand="false"
              node-key="id"
              show-checkbox
              check-strictly
              :default-checked-keys="formRole.menuId"
              style="display: block;width: 100%"/>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="备注">
          <el-input :rows="2" type="textarea" v-model="formRole.remarks" placeholder="请输入备注"/>
        </el-form-item>
      </el-col>

    </el-row>
  </el-form>

  <div class="dialog-button-wrap">
    <el-button @click="close">取消</el-button>
    <el-button @click="editRole(ruleFormRef)" :loading="subLoading" type="success" color="#e88d53" class="add-user">保存</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref,reactive } from "vue";
import { ElMessage, ElTree, FormInstance, FormRules } from "element-plus";
import {editRoleApi} from "@/api/system/role/role.ts";
import {getMenuListApi} from "@/api/system/menu/menu.ts";

// 定义事件
const emit = defineEmits(['closeAddRoleForm','success'])

// 按钮状态
const  subLoading = ref(false);
// 表单数据对象
const formRole = reactive({
  id: 0,
  name: '',
  sort: 0,
  isAdmin: 0,
  remarks: '',
  menuId: []
});

// 获取父组件roleList,传过来的roleInfo对象,
const props = defineProps(['roleInfo']);
const roleInfo = props.roleInfo;

// 给表单填充数据
for (let key in formRole) {
  formRole[key] = roleInfo[key];
}

// 编辑函数
const editRole = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return
  }
  await formEl.validate(async (valid,field) => {
    subLoading.value = true;
    if (valid) {
      formRole.menuId = treeRef.value!.getCheckedKeys(false);
      const { data } =  await editRoleApi(formRole);
      if (data.code === 200) {
        ElMessage.success(data.msg);
      } else {
        ElMessage.error(data.msg);
      }
      emit('success')
    } else {
      ElMessage.error("提交表单失败,你还有未填写的项")
    }
  })
  subLoading.value = false;
}

// 点击取消关闭弹出框
const close = () => {
  emit('closeAddRoleForm')
}

// 添加表单校验
// 表单实例读写
const ruleFormRef = ref<FormInstance> ();
// 表单约束规则对象
const rules = reactive<FormRules>({
  name: [{ required: true,message: '角色名不能为空',trigger: 'blur' }],
  sort: [{ required: true,message: '角色排序不能为空',trigger: 'blur' }],
  isAdmin: [{ required: true,message: '超级管理员不能为空',trigger: 'blur' }],
})

// 定义属性菜单实例对象
const treeRef = ref<InstanceType<typeof ElTree>>();
// 菜单数据对象
const menus = ref();
const treeProps = {
  children: 'sub_menus',
  label: 'name'
}
// 获取菜单数据
const menuList = async () => {
  const { data } = await getMenuListApi();
  menus.value = data.result
}
menuList();



</script>

<style scoped>
.dialog-button-wrap {
  text-align: center;
  margin-top: 20px;
}
.add-user {
  color: white;
}

</style>